<template>
  <div class="userFavoriteItem" v-if="nsCollect" @click="toFavoriteDetail">
    <div class="titleBox">
      <div class="title">{{ nsCollect.title }}</div>
      <div
        class="more"
        v-if="nsCollect.title != '默认收藏夹'"
        @click.stop="more"
      >
        <svg
          t="1677136516616"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4040"
          width="16"
          height="16"
        >
          <path
            d="M512 704c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m-64-192c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64z m0-256c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64z"
            p-id="4041"
            fill="#999999"
          ></path>
        </svg>
      </div>
    </div>
    <div class="sub">{{ nsCollect.list.length }}部作品</div>
    <div class="favoriteArticles" v-if="nsCollect.list.length > 0">
      <FavoriteArticles
        v-for="(item, i) in nsCollect.list"
        :key="i"
        :item="item"
      />
    </div>
    <div class="none" v-else>还没有收藏的作品</div>
  </div>
</template>

<script>
import FavoriteArticles from "@/components/FavoriteArticles.vue";

export default {
  components: {
    FavoriteArticles,
  },
  props: ["nsCollect", "index"],
  methods: {
    toFavoriteDetail() {
      // console.log("toFavoriteDetail");
      this.$router.push({
        path: "/favoriteDetail",
        query: {
          i: this.index,
          userid: this.$route.query.userid,
        },
      });
    },
    more() {
      // console.log("more");
      // this.show = true;
      this.$emit("doMore", { i: this.index });
    },
  },
};
</script>

<style lang="scss" scoped>
.userFavoriteItem {
  margin-top: 10px;
  background-color: white;
  padding: 15px;
  padding-right: 0px;

  .titleBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;

    .title {
      font-weight: bold;
      font-size: 15px;
      //   margin-left: 15px;
    }

    .more {
      margin-right: 15px;
    }
  }

  .sub {
    margin-bottom: 8px;
    font-size: 12px;
    color: #999;
  }

  .favoriteArticles {
    // width: 345px;
    width: 100%;
    height: 100px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: scroll;
  }

  .none {
    width: 345px;
    text-align: center;
    height: 100px;
    line-height: 100px;
    border-radius: 5px;
    background-color: #f2f2f2;
    font-size: 15px;
    color: #999;
  }
}
</style>
